<!--
 * @Author: wuchao66_Git 2803670835@qq.com
 * @Date: 2023-10-26 17:06:28
 * @LastEditors: wuchao66_Git 2803670835@qq.com
 * @LastEditTime: 2023-10-26 21:57:22
 * @FilePath: \t162vue\src\views\test\t154vuetest.html
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- 插值表达式 -->
        {{mesg}}
        {{1>2?true:false}}
        <!-- v-on -->
        <button v-on:click="clicking">点击按钮</button>
        <button @click="clicking">点击按钮</button>
        <input @keydown="downing">按下键盘</input>
        键盘松开 <input @keyup="uping()">
        空格<input @keyup.space="kong">
        <p>{{xx}}</p>
        <p v-html="xx"></p>
        <p v-text="xx"></p>
        <!-- v-if v-show   v-else否定上面的  -->
        <p v-if="b">151</p>
        <p v-else>151154</p>
        <p v-show="a">154</p>
        <!-- v-bind v-model -->
        <font :color="color1">我爱常杀科泰，北大清脑</font>
        死的查询内容<input :value="moders"></input>
        请输入获得双向查询内容
        <input v-model="moders"></input>
        <!-- v-for       -->
        <ul>
            <li v-for="(xjj,index) in entrys" :key="index">
                {{xjj.name}}
            </li>
        </ul>
        <ul>
            <li v-for="(xjj,index) in arrays" :key="index">
                {{xjj.title}}
            </li>
        </ul>
        <!-- 计算属性 -->
        死的查询内容<input :value="xx"></input>
        请输入获得双向查询内容
        <input v-model="xx"></input>
        <p>Original message: "{{ xx }}"</p>
        <p>Computed reversed message: "{{ yy }}"</p>
    </div>
    <script type="text/javascript" src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.js">
    </script>
    <script type="text/javascript">
        var app = new Vue({
            el: '#app',
            data: function () {//数据
                return {
                    mesg: '我要好好学开发了，我要毕业了，不玩了', xx: 'xx',
                    a: true, b: false, color1: 'green', moders: '123',
                    entrys: [{ name: '1' }, { name: '2' }, { name: '蝴蝶' }]
                    , arrays: []
                }
            }, methods: {//方法
                clicking() {
                    alert("谁点了我");
                }, downing() {
                    alert("按下了");
                },
                uping() {
                    alert("松开了");
                }, kong() {
                    alert("按了空格");
                }
            }, beforeCreate: function () {
                alert("创建之前了");
            }, created: function () {

            }, mounted: function () {//跨域 app
                var list = axios.get('http://localhost:8080/entry/findEntry161')
                    .then(function (res) {//成功的返回值
                        console.log(res);
                        app.arrays = res.data;
                        console.log(app.arrays[0].title);
                    }).catch(function (reason) {
                        console.log(reason)
                    });
            }, watch: {//监听
                moders(newval, oldval) {
                    alert("变成了" + newval);
                }
            }, computed: {//计算属性
                yy: function () {
                    return this.xx + "新的";
                }
            }
        });
    </script>
</body>
</html>